<template>
  <div class="bg_view" v-if="sid">
    <div class="cam_item" v-for="item in depts">
      <div class="head" v-if="sid==item.id">
        <div class="name">{{ item.deptName }}</div>
      </div>
      <div class="line" v-if="sid==item.id"></div>
      <div class="address" v-if="sid==item.id">地址：{{ item.address }}</div>
      <div class="btnCell" v-if="sid==item.id">
        <!--        <div class="btn" @click="gofloor(item.id)">楼层分布</div>-->
        <div class="btn" @click="goNav(item.id)">医院导航</div>
      </div>
    </div>
  </div>
  <div class="bg_view" v-else>
    <div class="cam_item" v-for="item in depts">
      <div class="head">
        <div class="name">{{ item.deptName }}</div>
      </div>
      <div class="line"></div>
      <div class="address">地址：{{ item.address }}</div>
      <div class="btnCell">
        <div class="btn" @click="gofloor(item.id)">楼层分布</div>
        <div class="btn" @click="goNav(item.id)">医院导航</div>
      </div>
    </div>
  </div>
</template>

<script>
import {getDeptInfo, getWxSign} from "@/api/api";

export default {
  data() {
    return {
      depts: [],
      value: "",
      sid: undefined
    };
  },
  created() {
    this.sid = this.$route.query.sid;
    this.getDeptInfo();
    this.getWxSign()
    // setTimeout(() => {
    //   this.getWZ()
    // }, 2000)

  },
  mounted() {
    // this.getWxSign()
  },
  methods: {
    getWxSign() {
      console.log(window.location.href)
      getWxSign({
        url: window.location.href,
      }).then((res) => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ["openLocation", "getLocation"], // 必填，需要使用的JS接口列表

        });
        wx.ready(function () {
          console.log("ready");

          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
        });
        wx.error(function (res) {
          console.log("error:" + res);
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
        });

      });
    },

    gofloor(id) {
      // id 1总院区
      if (id == 1) {
        window.localStorage.setItem("floorName", "1F")
        window.localStorage.setItem("ffValue", 0)
        this.$router.push({
          path: "/floor_distribution",
        });

      }
      // 2第一院区
      if (id == 2) {
        this.$router.push({
          path: "/hosp_navigation_detail2",
        });

      }

    },
    getWZ() {
      wx.getLocation({
        type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
          var speed = res.speed; // 速度，以米/每秒计
          var accuracy = res.accuracy; // 位置精度
          this.value = longitude + latitude
          console.log('longitude==>', longitude)
          console.log('latitude==>', latitude)
        },
        fail: function (err) {
          alert("获取定位位置信息失败！")
        },
        cancel: function (res) {
          alert('用户拒绝授权获取地理位置');
        }
      })
    },
    goNav(id) {


      if (id == 1) {
        wx.openLocation({
          latitude: 41.798155, // 纬度，浮点数，范围为90 ~ -90
          longitude: 123.412355, // 经度，浮点数，范围为180 ~ -180。
          name: '中国医科大学附属口腔医院总院', // 位置名
          address: '沈阳市和平区南京北街117号', // 地址详情说明
          scale: 18, // 地图缩放级别,整形值,范围从1~28。默认为最大
        })
        // window.location.href = "https://apis.map.qq.com/uri/v1/geocoder?coord=41.798155,123.412355&referer=EYOBZ-LU36F-S2AJ4-NINVO-JOJY7-4FFAX"
      } else if (id == 2) {
        wx.openLocation({
          latitude: 41.806478, // 纬度，浮点数，范围为90 ~ -90
          longitude: 123.441686, // 经度，浮点数，范围为180 ~ -180。
          name: '中国医科大学附属口腔医院第一门诊', // 位置名
          address: '沈阳市沈河区奉天街359号(恒运商务大厦)', // 地址详情说明
          scale: 19, // 地图缩放级别,整形值,范围从1~28。默认为最大
        })
        // window.location.href = "https://apis.map.qq.com/uri/v1/geocoder?coord=41.806478,123.441686&referer=EYOBZ-LU36F-S2AJ4-NINVO-JOJY7-4FFAX"
      } else if (id == 3) {
        wx.openLocation({
          latitude: 41.792296, // 纬度，浮点数，范围为90 ~ -90
          longitude: 123.411227, // 经度，浮点数，范围为180 ~ -180。
          name: '中国医科大学附属口腔医院南院区', // 位置名
          address: '沈阳市和平区北二马路92号', // 地址详情说明
          scale: 19, // 地图缩放级别,整形值,范围从1~28。默认为最大
        })

      }
    },
    getDeptInfo() {
      getDeptInfo({
        deptId: "",
        parentId: "0",
        level: "0",
      }).then((res) => {
        this.depts = res.data;
      });
    },
  },
};
</script>
<style scoped>
.bg_view {
  height: 100%;
  min-height: calc(100% - 0.75rem);
  background-color: #f7fafd;
  padding-top: 0.75rem;
}

.cam_item {
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(174, 206, 254, 0.3);
  border-radius: 6px;
  margin: 0 1rem;
  margin-bottom: 0.75rem;
  width: calc(100% - 3.75rem);
  padding: 0 0.875rem;
}

.cam_item .head {
  height: 2.9375rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cam_item .head .name {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #131a2a;
}

.cam_item .head .btn {
  width: 4.6875rem;
  height: 1.75rem;
  background: linear-gradient(0deg, #448eff 0%, #66a3ff 100%);
  border-radius: 3px;
  text-align: center;
  line-height: 1.75rem;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 24px;
}

.cam_item .line {
  width: calc(100%);
  height: 0.0625rem;
  background-color: #e7ecf5;
}

.cam_item .address {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #a4adbe;
  line-height: 20px;
  padding: 0.75rem 0;
}

.btnCell {
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.btnCell .btn {
  width: 5.625rem;
  height: 2.0625rem;
  background: linear-gradient(0deg, #448EFF 0%, #66A3FF 100%);
  border-radius: 0.1875rem;
  text-align: center;
  line-height: 2.0625rem;

  margin-left: 0.625rem;
  color: #ffffff;
}

.btnCell .btn:first-child {
  background: #fff;
  color: rgba(72, 143, 255, 1);
  border: 1px solid rgba(72, 143, 255, 1);

}
</style>
